<template>
    <div>
        <web-header v-if="destination.fid == 1" show="outbound" />
        <web-header v-else show="domestic" />
        <!-- <Header-new v-if="destination.fid == 1" show="outbound" />
        <Header-new v-else show="domestic" /> -->

        <!-- <div style="width:1200px; height:40px; background-color: red;"></div> -->
        <!-- 侧栏 -->
        <line-sidebar />



        <div class="breadcrumb"> 您当前的位置：
            <router-link to="/">首页</router-link> &gt;
            <router-link to="/area">目的地</router-link>
            &gt;
            <span>{{ destination.city }}线路搜索</span>
        </div>

        <div class="big_box">
            <aside>
                <!-- <div class="box_a">
                    <div class="top">{{ destination.city }}旅游</div>
                    <div class="bottom">
                        <ul>
                            <li>
                                <div v-for="item in destination.mdd" :key="item">
                                    <RouterLink :to="`/line/${item.id}`"
                                       >
                                        {{ item.title }} </RouterLink>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div> -->
                <div class="box_c" @click="selectOpen()">
                    <ul>
                        <li class="consult-right-box">
                            <div class="consult-right-box-img"> <img
                                    src="https://admin.hqx.com.cn/Public/App/image/Vector-1.png" alt=""
                                    style="width: 24px;"> </div>
                            <div class="consult-right-box-title">私人定制<span
                                    class="consult-right-box-title-tip iconfont icon-youjiantou"></span> </div>
                            <div class="consult-right-box-name">说出你想怎么玩</div>
                        </li>
                        <li class="consult-right-box">
                            <div class="consult-right-box-img"> <img
                                    src="https://admin.hqx.com.cn/Public/App/image/Vector-2.png" alt=""
                                    style="width: 24px;"> </div>
                            <div class="consult-right-box-title">包团定制<span
                                    class="consult-right-box-title-tip iconfont icon-youjiantou"></span> </div>
                            <div class="consult-right-box-name">定制团队出行线路</div>
                        </li>
                        <li class="consult-right-box">
                            <div class="consult-right-box-img"> <img
                                    src="https://admin.hqx.com.cn/Public/App/image/Vector-3.png" alt=""
                                    style="width: 19px;"> </div>
                            <div class="consult-right-box-title">在线咨询<span
                                    class="consult-right-box-title-tip iconfont icon-youjiantou"></span> </div>
                            <div class="consult-right-box-name">24小时在线咨询</div>
                        </li>
                    </ul>
                </div>
                <div id="left3"></div>
                <!-- <el-affix :offset="0"> -->
                <div class="box_b left3 box_new" v-if="list.length != 0">
                    <div class="box-new-name">
                        <span class="iconfont icon-edu-rementuijian" style="color: red; padding-right: 2px"></span>
                        热门推荐
                    </div>
                    <div class="bottom">
                        <div v-for="(item, index) in recommendList" :key="item.id">
                            <router-link v-if="index < list.length" :to="`/details/${item.id}`">
                                <img :src="item.pic" alt="" class="box-new-img">
                                <div class="box-new-title clamp-line-2">{{ item.title }}</div>
                                <div style="padding-bottom: 2px;">
                                    <span style="font-weight:bold; color: #FF5454; font-size: 16px;">{{ item.price
                                        }}/人
                                        <span style="font-size: 10px; font-weight: 400;">起</span></span>
                                </div>

                            </router-link>
                        </div>
                    </div>
                </div>
            </aside>

            <div class="right_box">
                <div class="screen">
                    <div class="top">
                        <ul id="line_typeArr">
                            <li><a @click="changeList('line_type', '')" :class="data.line_type == '' ? 'active' : ''"
                                    href="javascript:void(0)">所有线路</a></li>
                            <li><a @click="changeList('line_type', 1)" :class="data.line_type == 1 ? 'active' : ''"
                                    href="javascript:void(0)">跟团旅游</a></li>
                            <li><a @click="changeList('line_type', 2)" :class="data.line_type == 2 ? 'active' : ''"
                                    href="javascript:void(0)">定制旅行</a></li>
                            <li><a @click="changeList('line_type', 5)" :class="data.line_type == 5 ? 'active' : ''"
                                    href="javascript:void(0)">包团旅游</a></li>
                            <li><a @click="changeList('line_type', 3)" :class="data.line_type == 3 ? 'active' : ''"
                                    href="javascript:void(0)">当地玩乐</a></li>
                        </ul>
                    </div>
                    <div class="bottom">
                        <!-- <ul class="screen-tabs">
                            <li style="width: 80px;"><span class="iconfont icon-yuandian1 dot"></span>目的地：</li>
                            <li  v-for="item in destination.mdd" :key="item.id">
                                <RouterLink :style="{ 'color': item.id == data.plays ? '#007AFF' : '' }"
                                   
                                    :to="`/line/${item.id}`">{{
                                        item.title
                                    }}</RouterLink>
                            </li>
                        </ul> -->
                        <dl>
                            <dt><span class="iconfont icon-yuandian1 dot"></span>游玩天数：</dt>
                            <dd id="line_daysArr">
                                <a @click="changeList('days', '')" href="javascript:void(0)">全部</a>
                                <a @click="changeList('days', 1)" :style="{ 'color': 1 == data.days ? '#007AFF' : '' }"
                                    href="javascript:void(0)">1日游</a>
                                <a @click="changeList('days', 2)" :style="{ 'color': 2 == data.days ? '#007AFF' : '' }"
                                    href="javascript:void(0)">2-4天</a>
                                <a @click="changeList('days', 3)" :style="{ 'color': 3 == data.days ? '#007AFF' : '' }"
                                    href="javascript:void(0)">5-7天</a>
                                <a @click="changeList('days', 4)" :style="{ 'color': 4 == data.days ? '#007AFF' : '' }"
                                    href="javascript:void(0)">8-11天</a>
                                <a @click="changeList('days', 5)" :style="{ 'color': 5 == data.days ? '#007AFF' : '' }"
                                    href="javascript:void(0)">11天以上</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt><span class="iconfont icon-yuandian1 dot"></span>价格范围：</dt>
                            <dd id="priceArr">
                                <a @click="changeList('prices', '')" href="javascript:void(0)">全部</a>
                                <a @click="changeList('prices', 1)"
                                    :style="{ 'color': 1 == data.prices ? '#007AFF' : '' }"
                                    href="javascript:void(0)">1000元以下</a>
                                <a @click="changeList('prices', 2)"
                                    :style="{ 'color': 2 == data.prices ? '#007AFF' : '' }"
                                    href="javascript:void(0)">1000-3000元</a>
                                <a @click="changeList('prices', 3)"
                                    :style="{ 'color': 3 == data.prices ? '#007AFF' : '' }"
                                    href="javascript:void(0)">3000-5000元</a>
                                <a @click="changeList('prices', 4)"
                                    :style="{ 'color': 4 == data.prices ? '#007AFF' : '' }"
                                    href="javascript:void(0)">5000-1万元</a>
                                <a @click="changeList('prices', 5)"
                                    :style="{ 'color': 5 == data.prices ? '#007AFF' : '' }"
                                    href="javascript:void(0)">1万元以上</a>
                                <!-- <a @click="changeList('prices', 5)"
                                    href="javascript:void(0)">7000-1万元</a> -->
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="orders">
                    <div class="title">综合排序：</div>
                    <ul id="orderArr">
                        <li class="t1">
                            <a v-if="data.order != 3 && data.order != 4" @click="changeList('order', 4)"
                                href="javascript:void(0)">销量
                            </a>
                            <a v-else-if="data.order == 4" @click="changeList('order', 3)" class="t2"
                                href="javascript:void(0)">销量
                            </a>
                            <a v-else-if="data.order == 3" @click="changeList('order', 4)" class="t1"
                                href="javascript:void(0)">销量
                            </a>
                        </li>
                        <li class="t2">
                            <a v-if="data.order != 1 && data.order != 2" @click="changeList('order', 2)"
                                href="javascript:void(0)">价位
                            </a>
                            <a v-else-if="data.order == 2" @click="changeList('order', 1)" class="t2"
                                href="javascript:void(0)">价位
                            </a>
                            <a v-else-if="data.order == 1" @click="changeList('order', 2)" class="t1"
                                href="javascript:void(0)">价位
                            </a>
                        </li>
                        <li class="t3">
                            <a v-if="data.order != 5 && data.order != 6" @click="changeList('order', 6)"
                                href="javascript:void(0)">人气
                            </a>
                            <a v-else-if="data.order == 6" @click="changeList('order', 5)" class="t2"
                                href="javascript:void(0)">人气
                            </a>
                            <a v-else-if="data.order == 5" @click="changeList('order', 6)" class="t1"
                                href="javascript:void(0)">人气
                            </a>
                        </li>
                        <li class="t4">
                            <!-- <a
                                href="javascript:void(0)">最新
                            </a> -->
                            <a v-if="data.order != 7 && data.order != 8" @click="changeList('order', 8)"
                                href="javascript:void(0)">最新
                            </a>
                            <a v-else-if="data.order == 8" @click="changeList('order', 7)" class="t2"
                                href="javascript:void(0)">最新
                            </a>
                            <a v-else-if="data.order == 7" @click="changeList('order', 8)" class="t1"
                                href="javascript:void(0)">最新
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="line_box" id="bigbox">
                    <div v-for="item in list" :key="item.id">
                        <lineItem :item='item'></lineItem>
                    </div>
                </div>
                <div class="page_a" @click="getList">
                    <a href="javascript:void(0)">
                         {{ moreText }}
                    </a>
                </div>

                <!-- <div>换个搜索词试试</div> -->

            </div>
        </div>
        <new-footer />
        <back-top />
        <popup-consult ref="RefChild"></popup-consult>

        <!-- 弹窗 -->
        <!-- 私人定制 -->
        <!-- 团队定制 -->
    </div>
</template>

<script setup>


import { area_details, line_items, area_Destination, theme_itemsByArea, connect_items, search_index } from "@/api/travel";
import { ref, reactive, onBeforeMount, onMounted, computed, onUpdated, watch } from "vue";
import { useRoute, RouterLink } from 'vue-router';
import lineItem from '@/components/list-item/lineItem.vue'
import lineSidebar from '@/components/sidebar/lineSidebar.vue'

const route = useRoute()
let fullPath = route.fullPath; // 保存当前路径
// console.log(route)
let data = ref({
    keyword: route.query.name,//目的地
    line_type: '', //出游方式
    theme: '',
    plays: '', //玩法
    prices: '', //价格范围
    days: '',
    order: 8, // 排序
    page: 1,
    limit: 5,
});
let list = ref([]);


let destination = ref({ fid: 1 }); // 所有信息 
let moreText = ref('展开更多精彩体验') // 展开更多
let recommendList = ref([]); // 推荐


// 获取子组件的引用
const RefChild = ref();

const selectOpen = () => {
    if (RefChild.value) {
        RefChild.value.open();
    }
}

// 获取传参
// console.log(route)
// 根据参数请求列表页
// 展示多级筛选值
// 完成

// 初始化 
const initialize = async () => {
    fullPath = route.fullPath; // 保存当前路径
    // 初始化数据
    data.value = {
        keyword: route.query.name,//目的地
        line_type: '', //出游方式
        theme: '',
        plays: '', //玩法
        prices: '', //价格范围
        days: '',
        order: 8, // 排序
        page: 1,
        limit: 5,
    };
    list.value = [];
    moreText.value = '展开更多精彩体验';
    // 重新请求
    // let res = await area_Destination({ id: route.params.area }); // 得到目的地区域父级信息
    // let area = await area_details({ id: route.params.area }); // 得到区域信息
    // destination.value = res.data;
    // destination.value.city = res.data.title;
    // destination.value.area = area.data.title;

    // document.title = `${destination.value.area}旅游,去${destination.value.area}旅游要多少钱,${destination.value.area}旅游线路报价,环球行官网`;
    // 请求主题
    // let theme = await theme_itemsByArea({ area: data.value.area }); // 得到目的地区域父级信息
    // destination.value.theme = theme.data;
    // 请求玩法
    // let connect = await connect_items({ ids: destination.value.areas }); // 得到目的地区域父级信息
    // destination.value.connect = connect.data;

    // 初始化列表
    await getList();

    // 获取推荐列表
    let res2 = await line_items({  limit: 4 });
    recommendList.value = res2.data;

}



// 翻页 持续获取list数据
const getList = async () => {
    if (moreText.value == '没有更多了') {
        return;
    }
    let res = await search_index(data.value);
    list.value = [...list.value, ...res.data];
    data.value.page++;
    if (res.data.length == 0) {
        moreText.value = '没有更多了';
    }
}

// 改变data.value时切换列表
const anewList = async () => {
    let res = await search_index(data.value);
    list.value = [...res.data];
    moreText.value = res.data.length == 0 ? '没有更多了' : '展开更多精彩体验';
}


// data值改变
const changeList = (key, value) => {
    switch (key) {
        case 'line_type':
            data.value.line_type = value;
            break;
        case 'plays':
            data.value.plays = value;
            break;
        case 'theme':
            data.value.theme = value;
            break;
        case 'plays':
            data.value.plays = value;
            break;
        case 'prices':
            data.value.prices = value;
            break;
        case 'days':
            data.value.days = value;
            break;
        case 'order':
            data.value.order = value;
            break;
        default:
            break;
    }
    data.value.page = 1;
    anewList();
}


onMounted(async () => {
    initialize();

});



</script>

<style lang="scss" scoped>
@import "../../css/main_line_listNew.css";
</style>
